// Place all the styles related to the Models controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: https://sass-lang.com/

.form-check-label {
  input.checkbox {
    margin-right: 0.25em;
  }
}

div.form-control.tag-container {
  border: none;
  padding: 0;
}

.action-card .card-text {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  align-items: start;
}

.preview-card {
  min-height: 15em;
  height: 100%;
  background: none;
  justify-content: space-between;

  .image-preview {
    min-width: 100%;
  }

  iframe {
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    aspect-ratio: 1;
  }

  .preview-empty {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    font-size: .75rem;

    p {
      position: absolute;
      margin: 1em;
      margin-block-end: 0;
      text-align: center;
      z-index: 50;
      font-weight: 500;
    }

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: -20%;
      left: 50%;
      width: 1px;
      height: 140%;
      background-color: #333;
      transform: rotate(45deg);
      border-radius: 1px;
      opacity: .08;
    }

    &::after {
      transform: rotate(-45deg);
    }

  }

  .card-body {
    display: flex;
    flex-direction: column;
    max-height: fit-content;
    gap: 0.5rem;
    justify-content: space-between;
  }

  .card-title {
    margin-bottom: 0;
  }

  .card-body .btn {
    width: fit-content;
    height: fit-content;
  }

  .sensitive {
    filter: blur(1rem);
  }
}

.carousel-inner {

  /* CSS hexagon background by Temani Afif: https://css-pattern.com/ */
  --s: 37px;
  --c: #0000, #333 .5deg 119.5deg, #0000 120deg;
  --g1: conic-gradient(from 60deg at 56.25% calc(425%/6), var(--c));
  --g2: conic-gradient(from 180deg at 43.75% calc(425%/6), var(--c));
  --g3: conic-gradient(from -60deg at 50% calc(175%/12), var(--c));
  background:
    var(--g1), var(--g1) var(--s) calc(1.73*var(--s)),
    var(--g2), var(--g2) var(--s) calc(1.73*var(--s)),
    var(--g3) var(--s) 0, var(--g3) 0 calc(1.73*var(--s)) #444;
  background-size: calc(2*var(--s)) calc(3.46*var(--s));

  img {
    aspect-ratio: 1.77777;
    object-fit: contain;
    object-position: center;
  }

}

.carousel-control-play {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}

.radio-option {

  input[type="radio"] {
    display: none
  }

  &:has(input[type="radio"]:checked) {
    @extend .bg-success;
  }

  label {
    display: block;
  }
}

.details-table {
  display: grid;
  grid-template-columns: min-content auto;
  gap: 0.5em;
}

.editable {
  display: inline-block !important;
  border: var(--bs-border-width) solid transparent;

  &:hover {
    border: var(--bs-border-width) solid var(--bs-border-color);
  }

  &:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-link-hover-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    width: auto;
  }
}
